<template>
    <div class="screen_block_box">
        <h2 class="header">系统监控</h2>
        <div class="info_box flex-row">
            <div class="info_item">
                <img class="icon" src="@/assets/icon_cpu.png"/>
                <p class="label">CPU</p>
                <p class="val">500/1000</p>
            </div>
            <div class="info_item">
                <img class="icon" src="@/assets/icon_memory.png"/>
                <p class="label">内存</p>
                <p class="val">500/1000</p>
            </div>
            <div class="info_item">
                <img class="icon" src="@/assets/icon_disk.png"/>
                <p class="label">硬盘</p>
                <p class="val">500/1000</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"SystemInfo",
}
</script>
<style lang="scss" scoped>
.screen_block_box{
    flex-shrink: 0;
}
.info_box{
    padding: 15px 20px;
    justify-content: space-between;
    .info_item{
        text-align: center;
        .icon{
            width: 70px;
            height: 70px;
        }
        .label{
            margin-top: 15px;
            font-size: 12px;
            color: rgba($color: #23cdff, $alpha: .5);
        }
        .val{
            font-size: 15px;
            color: #23cdff;
        }
    }
}
</style>